<template>
  <div class="overflow-hidden">
    <div class="my-3 flex mr-12 justify-end">
      <el-radio-group v-model="tabIndex" fill="#ecf5ff" text-color="#409eff">
        <el-radio-button label="1">
          <div class="flex items-center">
            <el-icon><Histogram /></el-icon> <span class="ml-1">趋势图</span>
          </div>
        </el-radio-button>
        <el-radio-button label="2">
          <div class="flex items-center">
            <el-icon><Tickets /></el-icon> <span class="ml-1">表格</span>
          </div>
        </el-radio-button>
      </el-radio-group>
    </div>
    <div class="flex justify-center">
      <div v-show="tabIndex === '1'" ref="chart" class="w-[90vw] h-[calc(100vh-290px)]"></div>
      <div v-show="tabIndex === '2'" class="w-full">
        <el-table :data="tableData" :default-sort="{ prop: 'date', order: 'descending' }">
          <el-table-column type="index" label="序号" width="80" align="center" />
          <el-table-column prop="createTime" label="上传时间" sortable align="center" />
          <el-table-column prop="takeTime" label="采集时间" sortable align="center" />
          <el-table-column prop="diastole" label="收缩压/舒张压(mmHg)" align="center">
            <template #default="scope">
              <span>{{ scope.row.shrink }}/{{ scope.row.diastole }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="heartRate" align="center" label="脉搏" />
          <el-table-column prop="deviceNo" label="设备号" align="center" />
        </el-table>
        <div class="flex justify-end mt-3">
          <el-pagination
            v-model:current-page="formData.pageNum"
            v-model:page-size="formData.pageSize"
            layout="prev, pager, next, jumper"
            :total="pageTotal"
            @current-change="getBloodDataFn"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, markRaw, nextTick, onMounted } from 'vue'
import * as echarts from 'echarts'
import { getBloodData, getDeviceData, getDeviceStandard } from '@/api/home'
import { dayjs } from 'element-plus'

const tabIndex = ref('1')
const { familyId } = defineProps<{
  familyId: number
}>()
const chart = ref<HTMLDivElement | null>(null)
const myChart = ref()
const pageTotal = ref(0)
const tableData = ref()
const option = ref<echarts.EChartsOption>({
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: [],
    axisLabel: {
      color: '#fff',
      fontSize: '16px'
    }
  },
  yAxis: [
    {
      // 第一种方式
      type: 'value',
      name: '血压【mmHg】',
      min: 0,
      max: 220,
      nameTextStyle: {
        color: '#fff',
        fontSize: '18px',
        fontWeight: 'bold',
        padding: [0, 0, 0, 60]
      },
      position: 'left',
      axisLabel: {
        formatter: '{value}',
        color: '#fff',
        fontSize: '18px'
      },
      splitLine: {
        //坐标轴在grid区域中的分割线
        show: false
      }
    },

    {
      //第二种方式

      type: 'value',
      name: '脉搏【次/分】',
      min: 0,
      max: 220,
      position: 'right',
      nameGap: 10, // 名称距离 y 轴的距离为 10
      offset: 0, // y 轴整体向右移动 10 像素
      axisLabel: {
        formatter: '{value}',
        color: '#fff',
        fontSize: '18px'
      },
      nameTextStyle: {
        color: '#fff',
        fontSize: '18px',
        fontWeight: 'bold',
        padding: [0, 60, 0, 0]
      },
      splitLine: {
        //坐标轴在grid区域中的分割线
        show: false
      }
    }
  ],
  grid: {
    left: 0,
    right: 0,
    bottom: 0,
    top: 50,
    containLabel: true //是否包含坐标值
  },
  legend: {
    itemWidth: 20, // 标签宽度为20px
    itemHeight: 10, // 标签高度为10px
    data: ['收缩压', '舒张压', '脉搏'],
    right: '46%',
    top: '0px',
    textStyle: {
      color: 'white',
      fontSize: '20px'
    }
  },
  tooltip: {
    trigger: 'axis'
  },
  series: [
    {
      data: [],
      type: 'line',
      name: '收缩压',
      itemStyle: {
        color: function (param: any) {
          if (param.value > standInfo.value?.sbpMaxNum) {
            return 'red'
          } else {
            return '#00FFC1'
          }
        }
      },
      symbol: 'circle',
      yAxisIndex: 0,
      markLine: {
        symbol: 'none',
        data: [
          {
            yAxis: 0,
            lineStyle: {
              color: 'yellow',
              type: 'dashed',
              width: 1
            },
            label: {
              show: false
            }
          },
          {
            yAxis: 0,
            lineStyle: {
              color: 'yellow',
              type: 'dashed',
              width: 1
            },
            label: {
              show: false
            }
          }
        ]
      },
      smooth: true,
      color: '#008000',
      symbolSize: 8
    },
    {
      data: [],
      type: 'line',
      symbol: 'cirlce',
      symbolSize: 8,
      name: '舒张压',
      itemStyle: {
        color: function (param: any) {
          if (param.value > standInfo.value?.dbpMinNum) {
            return 'red'
          } else {
            return '#7DB9FF'
          }
        }
      },
      smooth: true,
      yAxisIndex: 0,
      color: '#3ab6e7'
    },
    {
      data: [],
      type: 'line',
      symbol: 'rect',
      symbolSize: 8,
      name: '脉率',
      smooth: true,
      yAxisIndex: 1,
      color: '#ffa500'
    }
  ]
})
onMounted(() => {
  myChart.value = markRaw(echarts.init(chart.value))
  getBloodDataFn()
  nextTick(() => {
    initEchart()
  })
})
const formData = ref({
  familyId,
  deviceType: '2',
  pageNum: 1,
  pageSize: 10
})
const getBloodDataFn = async () => {
  const res = await getBloodData(formData.value)
  tableData.value = res?.data.list
  pageTotal.value = res?.data.total
}
const standInfo = ref<any>({
  ssxyL: '',
  ssxyR: '',
  sbpMax: '',
  sbpMin: '',
  dbpMax: '',
  dbpMin: '',
  sbpMaxNum: '',
  dbpMinNum: '',
  heartMaxNum: '',
  takeTime: ''
})
const initEchart = async () => {
  const res: any = await getDeviceData({ familyId, deviceType: '2' })
  let dateBox: string[] = []
  let sbpBox: number[] = []
  let dbpBox: number[] = []
  let mbBox: number[] = []
  res.data.forEach((item: any) => {
    dateBox.unshift(dayjs(item.takeTime).format('YYYY-MM-DD hh:mm:ss'))
    dbpBox.unshift(item.diastole)
    sbpBox.unshift(item.shrink)
    mbBox.unshift(item.heartRate)
  })
  let obj: any = option.value
  obj.xAxis.data = dateBox as never
  obj.series[0].data = sbpBox as never
  obj.series[1].data = dbpBox as never
  obj.series[2].data = mbBox as never
  const res1 = await getDeviceStandard({ familyId, deviceType: '2' })
  standInfo.value = res1?.data
  standInfo.value.sbpMaxNum = +res1?.data?.sbp?.max || 0
  standInfo.value.dbpMinNum = +res1?.data?.dbp?.max || 0
  standInfo.value.heartMaxNum = +res1?.data?.heart_rate?.max || 0
  obj.series[0].markLine.data[0].yAxis = +res1?.data?.sbp?.max || 0
  obj.series[0].markLine.data[1].yAxis = +res1?.data?.dbp?.max || 0
  myChart.value.setOption(option.value, true)
  window.onresize = function () {
    myChart.value.resize()
  }
}
</script>

<style scoped lang="less">
.el-table,
.el-table__expanded-cell {
  background-color: transparent !important;
}
:deep(.el-table th),
:deep(.el-table tr),
:deep(.el-table td) {
  background-color: transparent !important;
  color: #fff;
}
:deep(.el-pager li) {
  margin: 0 4px;
}
</style>
